<template>
  <div>
    <!--吸顶-->
    <van-sticky>
    <!--header-->
    <van-row style="background:#fff">
      <van-col >
        <a href="" class="logo"></a>
      </van-col>
      <van-col >
        <van-search 
        class="index_header_search" 
          v-model="search_v" placeholder="请输入搜索关键词" />
      </van-col>
      <van-col >
        <div class="loginBtn">登录</div>
      </van-col>
    </van-row>

    <!--滚动的tab按钮列表-->
    <van-tabs>
      <van-tab v-for="(n,inx) in tabBtnList" :title="n" :key="inx">
      <!--内容 {{ n}}-->  
      </van-tab>
    </van-tabs>
 </van-sticky>

  <!--轮播图-->
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(n,inx) in imgObj" :key=inx>
        <img :src=n />
      </van-swipe-item>
  </van-swipe>
  
  <!--滚动条下的广告-->
  <van-row class="service_info">
    <van-col span="8">
        <i class="icon icon_1"></i>
        <span>网易自营品牌</span>
    </van-col>
    <van-col span="8">
        <i class="icon icon_2"></i>
        <span>30天无忧退货</span>
    </van-col>
    <van-col span="8">
        <i class="icon icon_3"></i>
        <span>48小时快速退货</span>
    </van-col>
  </van-row>

  <!--两排，十个栏目图-->
  <van-grid :column-num="5">
    <van-grid-item v-for="(n,inx) in goods_icon" :key="inx">
      <img :src=n.imgurl alt="">
      <div>{{n.goods_txt}}</div>
    </van-grid-item>
  </van-grid>

  <!--商品列表-->
  <div class="goodsListDiv">
      <h1>
        <label>新品首发</label>
        <a href="">更多</a>
      </h1>
      <van-grid :center="false" :border="false" :column-num="3"  >
          <van-grid-item v-for="(n,inx) in goods_List" :key="inx">
              <div class="goodsDiv">
                <img :src=n.imgurl >
              </div>
            <div>{{n.txt}}</div>
          </van-grid-item>
      </van-grid>
  </div>
  
  <div style="height:2rem;background:#666;font-size:.5rem;color:#fff;text-align:center;">
    footer div
  </div>
  <!--吸底 footer-->
  <footer_bar></footer_bar>
  </div>
</template>

<script>
import axios from 'axios'
import footer_bar from './footer_bar.vue'
export default {
  name: 'app_index',
  components:{footer_bar},
  data () {
    return {
      search_v:'',
     tabBtnList:'',
     imgObj:[
        'https://yanxuan.nosdn.127.net/26f74b9b5fb3d972a2a31aa37b989a2d.jpg?type=webp&amp;imageView&amp;quality=75&amp;thumbnail=750x0',
        'https://yanxuan.nosdn.127.net/7ea29de0c15383fb068bf69f3a4548ea.jpg?type=webp&amp;imageView&amp;quality=75&amp;thumbnail=750x0',
        'https://yanxuan.nosdn.127.net/2c58015b33411df9a56e77ddbcfd571e.jpg?type=webp&amp;imageView&amp;quality=75&amp;thumbnail=750x0',
        'https://yanxuan.nosdn.127.net/138c6a5bab8850fab127114791115f0d.jpg?type=webp&amp;imageView&amp;quality=75&amp;thumbnail=750x0',
        'https://yanxuan.nosdn.127.net/31c64e1ae29c23738f92422b1380b01e.jpg?type=webp&amp;imageView&amp;quality=75&amp;thumbnail=750x0',
        'https://yanxuan.nosdn.127.net/88fa27794ddac5084753945c3c2ec1b0.jpg?type=webp&amp;imageView&amp;quality=75&amp;thumbnail=750x0',
        'https://yanxuan.nosdn.127.net/00ea3b2f89ff0261bd66f70833d79281.jpg?type=webp&amp;imageView&amp;quality=75&amp;thumbnail=750x0',
        'https://yanxuan.nosdn.127.net/26f74b9b5fb3d972a2a31aa37b989a2d.jpg?type=webp&amp;imageView&amp;quality=75&amp;thumbnail=750x0',
        'https://yanxuan.nosdn.127.net/7ea29de0c15383fb068bf69f3a4548ea.jpg?type=webp&amp;imageView&amp;quality=75&amp;thumbnail=750x0'
       ],
     goods_icon:[
       {
         imgurl:require('../assets/goods_icon/goods_icon_1.png'),
         goods_txt:'新品首发'
       },
       {
         imgurl:require('../assets/goods_icon/goods_icon_2.png'),
         goods_txt:'居家生活'
       },
       {
         imgurl:require('../assets/goods_icon/goods_icon_3.png'),
         goods_txt:'服饰鞋包'
       },
       {
         imgurl:require('../assets/goods_icon/goods_icon_4.png'),
         goods_txt:'美食酒水'
       },
       {
         imgurl:require('../assets/goods_icon/goods_icon_5.png'),
         goods_txt:'个护清洁'
       },
       {
         imgurl:require('../assets/goods_icon/goods_icon_6.png'),
         goods_txt:'母婴亲子'
       },
       {
         imgurl:require('../assets/goods_icon/goods_icon_7.png'),
         goods_txt:'运动旅行'
       },
       {
         imgurl:require('../assets/goods_icon/goods_icon_8.png'),
         goods_txt:'数码家电'
       },
       {
        imgurl:require('../assets/goods_icon/goods_icon_9.png'),
         goods_txt:'全球特色',
       },
       {
         imgurl:require('../assets/goods_icon/goods_icon_10.gif'),
         goods_txt:'每日秒杀',
       }
      ],
      active:'',
      goods_List:[
        {
          imgurl:require('../assets/goods_list/goods_1.jpg'),
          text:'网易有道词典笔2.0',
          price:749,
          gradientPrice:1
        },
        {
          imgurl:require('../assets/goods_list/goods_2.png'),
          text:'男士基础休闲裤',
          price:99.9,
          gradientPrice:2
        },
        {
          imgurl:require('../assets/goods_list/goods_3.png'),
          text:'男士舒软通勤商务正装鞋',
          price:299,
          gradientPrice:3
        },
        {
          imgurl:require('../assets/goods_list/goods_4.png'),
          text:'L1智能控速轻跑机(走跑一)',
          price:2599,
          gradientPrice:0
        },
        {
          imgurl:require('../assets/goods_list/goods_5.png'),
          text:'黄油华夫饼 1千克',
          price:749,
          gradientPrice:4
        },
        {
          imgurl:require('../assets/goods_list/goods_6.png'),
          text:'牙线棒 50支/盒 园线',
          price:749,
          gradientPrice:0
        },

      ]
    }
  },
  created(){
      axios.get("http://localhost:5632/get_tabbtn_List")
        .then(_d=>{
            console.log(_d.data);
            this.tabBtnList=_d.data;
        });
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.logo{
  width:1.38rem; 
  display: inline-block;
  margin:.2rem 0 0 .3rem;
  background-image: url("../assets/index_logo.png");
  background-size: 3.76rem 3.76rem;
  background-position: -1.26rem -2.52rem;
  height: .4rem;
}
.index_header_search{
  width:3.5rem; 
  border: 0;
  margin:.1rem 0 0 .1rem;
  padding: 0;
}
.van-search__content{
  background:#ededed;
  border-radius:.15rem;
}
.loginBtn{
  margin:.15rem 0 0 .2rem;
  width:.8rem;
  height:.45rem;
  color:#f00;
  line-height:.45rem;
  text-align: center;
  font-size:.22rem;
  border-radius: .1rem;
  border: 1px solid #f00;
}
.service_info{
  text-align: center;
  height: .6rem;  line-height: .6rem;
}
.service_info i.icon{
  display: inline-block;
  background-repeat: no-repeat;
  background-size: 100%;
  vertical-align: middle;
  width: .42667rem;height: .42667rem;
}
.service_info i.icon_1{
  background-image: url('../assets/icon_1.png');
}
.service_info i.icon_2{
  background-image: url('../assets/icon_2.png');
}
.service_info i.icon_3{
  background-image: url('../assets/icon_3.png');
}
.goodsListDiv{
  clear: both;
  margin: .2rem 0;  
  }
.goodsListDiv h1{
 display: block;
 clear: both;
 margin: 0 0.2rem;
 height: .5rem;
 line-height: .5rem;
}
.goodsListDiv h1 label{
 float: left; font-size: .3rem;
}
.goodsListDiv h1 a{
  float: right;font-size: .25rem;
}
.goodsDiv{
 width: 100%;
 background:#f5f5f5;
}
</style>
